<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片插入</title>
    </head>
    <body>
    <!-- 相对路径：从当前html文件出发去找资源
           1)图片与html文件在同一级目录，直接写图片全名 src="java.png"
           2)图片在html文件的下一级目录，先写文件夹名，再写图片全名 src="img/linux.png"
           3)图片在html文件的上一级目录，先 ../ 回到上级，再写图片全名 src="../app.png"
    -->
    <img src="java.png" >
    <img src="img/linux.png">
    <img src="../app.png">
    <!-- alt 图片不能正常加载时显示的替换文字 当图片不能正常显示时则会替换显示alt的内容 -->
    <img src="风清扬" alt="哎呀，图片被黑洞吞掉了！！">
    <!-- width设置图片宽度 height设置图片高度 注意图片失真问题：解决办法是只设置宽度或高度的其中一个 因为图片一般都是锁定宽高比例的 -->
    <!-- px 像素 屏幕上最小的一个发光点 数值越大元素越大 当鼠标放在图片的任意位置时会显示title的内容(需则写) -->
    <img src="img/zhongchuhong.jpg" width="300px" title="钟楚红最美">
    <!-- 绝对路径 从根目录(本地:盘符/网络:协议)出发去找资源 -->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///f93f25fba0a84f72be47f5058f84a655.png">





    </body>
</html>